<template>
  <div id="data-view">

      <top-header />

      <div class="main-content" style="margin-left: 0">
        <digital-flop />
        <div class="block-top-bottom-content">
            <rose-chart />
            <cards />
        </div>
      </div>
  </div>
</template>

<script>
import topHeader from './topHeader'
import digitalFlop from './digitalFlop'
import rankingBoard from './rankingBoard'
import roseChart from './roseChart'
import waterLevelChart from './waterLevelChart'
import scrollBoard from './scrollBoard'
import cards from './cards'

export default {
  name: 'DataView',
  components: {
    topHeader,
    digitalFlop,
    //rankingBoard,
    roseChart,
    //waterLevelChart,
    //scrollBoard,
    cards
  },
  data () {
    return {}
  },
  methods: {}
}
</script>

<style lang="less">
#data-view {
  width:100%;
  background-image: url('./img/bg.png');
  height: calc(100vh - 84px);
  background-color: #0b3de3;
  color: #fff;


  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 184px);
  }


  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

  }
  .block-top-bottom-content > * {
    height: 50%;  /* 设置子元素的高度 */
  }

}
</style>
